Menu zentrieren und in mobilier Ansicht verbessern

Das der "Hamburger" erst rot wird, wenn du auf den schwarzen Balken klickst, liegt an dem :hover in der Deklaration. Wenn du das weglässt, dann sollte es funktionieren.

Wie Thomas schon sagte, hängt die Ansicht mit der "Breite" des Browserfensters zusammen. Beim Handy ist das so schmal, weil die Seite per HTML auf lesbare Größe skaliert wird. Phone heißt, dass die Seite ab 767px mobil angezeigt wird, während Tablet schon ab 979px aktiv wird ( github.com/Bakual/Allrounder/blob/master...eDetails.xml#L60-L68 ).

Damit man diese Breite im LESS-Code dynamisch ansprechen kann wird sie in eine Variable übernommen und diese dann im Code verwendet. Diese Variable ist auch für den Custom-Code nützlich, da dieser so auch unabhängig der gewählten Option funktioniert.
Die Variablen lauten @maxMobileWidth und @minDesktopWidth ( github.com/Bakual/Allrounder/blob/master...ables.less#L153-L156 ).

Somit sähe der LESS-Code zum Färben des Hamburgers folgendermaßen aus:

Die Media-Queries bieten sich auch noch an einigen anderen Stellen an, an denen du das Menü etwas bewegst oder die Breite der Einträge veränderst. Es verhält sich wie ein normaler Block im LESS.

Falls du das Menü aber lieber gleich ausgeklappt haben möchtest, so kannst du das mit folgendem Code realisieren:

Matthias, hab nun mal alles mit deinem Code und wiederum neuen von mir ergänzt. Dank der Hilfe hier es auch geschaft, die mobile Version gut anzupassen.

Nur das mit diesem Flex sehe ich partout nicht: Wenn ich mit dem Firebug die Seite untersuche, treff ich das nirgends an. Wollte das nur mal finden, um dann etwas rumspielen zu können.

Geht auch nicht, da du es nicht nutzt. Du nutzt immer noch den breiten Rand :sick: .
Ich hatte das eingefügt, als ich auch spaßeshalber mal deine custom.less schön geordnet habe. Damals hatte ich auch noch einige andere Änderungen gemacht, die die custom.less von unnötigen Deklarationen entlasten, z.B. bei den Ecken des Headers oder Rändern mit 0px Breite (=border: none). Die Flexbox habe ich in Zeile 74-76 (#topmenu ul.menu) genutzt.

Danke Matthias, hab deinen Code einfach übernommen. Jetzt hab ich es angepasst und es funktioniert Also zumindest bei mir.


@Thomas: das mit der Fensterbreite verschieben ist ja so dermassen einfach - nur die Idee muss man haben